<template>
<div class="el-container">
  <el-image class="header-img" @click="goPage" src="../../static/img/logo.jpg"></el-image>
  <div style="display: inline" class="research">
    <el-input placeholder="搜索体育赛事" v-model="researchText" @keyup.enter.native="research">
      <template slot="append" class="btn-research"><el-button @click="research">搜 索</el-button></template>
    </el-input>
  </div>
  <el-menu class="el-menu" mode="horizontal"
           @select="handleSelect" menu-trigger="click"
           :default-active="activeIndex"
           text-color="#000000"
           active-text-color="#ed0b75">
    <el-menu-item index="1" style="font-size: 17px;font-weight: bold; margin-top: 5px">订单</el-menu-item>
    <el-submenu index="2" style="margin-top: 5px;">
      <template slot="title"><span @click="goLogin" style="font-size: 17px;font-weight: bold;">{{profile}}</span></template>
      <el-menu-item index="2-1">个人信息</el-menu-item>
      <el-menu-item index="2-2" v-if="role === '2'">票务发布</el-menu-item>
      <el-menu-item index="2-3" v-if="profile !== ''">退出登录</el-menu-item>
    </el-submenu>
  </el-menu>
</div>
</template>

<script>
export default {
  name: 'Header',
  created () {
    let username = localStorage.getItem('username')
    this.role = localStorage.getItem('role')
    if (username) {
      this.profile = username
    } else {
      this.profile = '登录'
    }
    if (this.$route.query.eventName) {
      this.researchText = this.$route.query.eventName
    }
  },
  data () {
    return {
      profile: '',
      role: '',
      researchText: '',
      activeIndex: ''
    }
  },
  methods: {
    goLogin () {
      if (this.profile === '登录') {
        this.$router.push({path: '/login'})
      }
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
      if (key === '1') {
        this.$router.push({path: '/order'})
      }
      if (key === '2-1') {
        this.$router.push({path: '/profile'})
      }
      if (key === '2-2') {
        this.$router.push({path: '/eventPub'})
      }
      if (key === '2-3') {
        localStorage.removeItem('username')
        localStorage.removeItem('role')
        localStorage.removeItem('token')
        this.$router.push({path: '/index'})
        location.reload()
      }
    },
    research () {
      let _this = this
      if (!_this.researchText) {
        this.goPage()
        return
      }
      let routeData = this.$router.resolve({
        path: '/index',
        query: {
          eventName: _this.researchText
        }
      })
      window.open(routeData.href, '_self')
    },
    goPage () {
      this.activeIndex = Math.random().toString()
      let routeData = this.$router.resolve({path: '/index'})
      window.open(routeData.href, '_self')
    }
  }
}
</script>

<style>
.el-container{
  margin: 0;
  padding: 0;
}

.el-menu{
  position: absolute;
  width: 20%;
  box-shadow: 0 2px 16px 0 rgba(220,220,220,.5);
  border-bottom: none;
  height: 72px;
  padding-left: 80%;
}

.el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
  min-width: 120px!important;
  height: 110px;
}

.el-menu.el-menu--horizontal{
  border-bottom: none;
}

.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
  margin-left: 20px;
}

.header-img{
  position: absolute;
  left: 8%;
  top: 5px;
  width: 219px;
  height: 60px;
  z-index: 1000;
}

.header-img:hover{
  cursor: pointer;
}

.research{
  position: absolute;
  right: 22%;
  top: 15px;
  width: 400px;
  height: 60px;
  z-index: 1000;
}

.el-input-group__append, .el-input-group__prepend{
  background-color: var(--them-color);
  color: var(--white-color);
}
</style>
